

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市 - 商品详情</title>
    <link rel="stylesheet" href="styles.css">

</head>
<style>
	/* Resetting default browser styles */
	body, h1, h2, ul, li, p {
	    margin: 0;
	    padding: 0;
	}
	
	/* Global styles */
	body {
	    font-family: Arial, sans-serif;
	    background-color: #f0f0f0;
	    color: #333;
	}
	
	header {
	    background-color: #007bff;
	    color: #fff;
	    padding: 20px;
	}
	
	header h1 {
	    font-size: 50px;
	    margin-bottom: 10px;
		text-align: center;
	}
	nav ul {
	    list-style-type: none;
	}
	
	nav ul li {
	    display: inline;
	    margin-right: 20px;
	}
	
	nav ul li a {
	    color: #fff;
	    text-decoration: none;
		font-size: 20px;
	}
	/* nav ul li a {
	    color: #fff;
	    text-decoration: none;
	} */
	
	main {
	    padding: 20px;
	}
	
	.product-details {
	    display: flex;
	    margin-bottom: 20px;
	}
	
	.product-image {
	    flex: 1;
	}
	
	.product-image img {
	    max-width: 100%;
	    height: auto;
	}
	
	.product-info {
	    flex: 2;
	    padding: 20px;
	    background-color: #fff;
	    border-radius: 5px;
	    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	.product-info h2 {
	    font-size: 40px;
	    margin-bottom: 10px;
	}
	
	.product-info h3 {
	    font-size: 30px;
	    margin-top: 20px;
	}
	
	.product-info p {
	    margin-bottom: 10px;
		font-size: 30px;
	}
	
	footer {
	    text-align: center;
	    margin-top: 20px;
	    padding: 10px 0;
	    background-color: #007bff;
	    color: #fff;
	}
    button{
        width: 150px; /* 设置按钮宽度 */
        height: 40px; /* 设置按钮高度 */
        background-color: #007bff;
        color: #fff;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
		margin-left: 10px;
        transition: background-color 0.3s ease ;
      
    }

</style>
<body>
    <!-- {%include 'nav.html' %} -->
    <header>
        <h1>校园宝贝集市</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">购物车</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">修改密码</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="product-details">
            <div class="product-image">
                <img src="../static/images/商品.jpg" alt="商品图片">
            </div>
            <div class="product-info">
                <h2>{{ product.name }}</h2>
				<p>ID: {{ product.id }}</p>
				<p>成色: {{ product.condition }}</p>
				<p>价格: ¥{{ product.price }}</p>
				<p>数量: {{ product.quantity }}</p>
				<p>销量: {{ product.sales }}</p>
				<p>交易方式: {{ product.payment_method }}</p>
				<p>是否下架: {{ product.is_on_sale }}</p>

<h3>商品详细信息</h3>
<p>{{ product.description }}</p>

<button type="submit">立即购买</button>
<button type="submit">联系商家</button>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 校园宝贝集市</p>
    </footer>
</body>
</html>
